import { Table } from "antd";
import { CaretRightOutlined, CaretDownOutlined } from '@ant-design/icons';
import { useThemeToken } from "@/theme/hooks";
import { useState } from "react";

const columns = [
  {
    title: '节点名称',
    dataIndex: 'nodeName',
    width: '30%'
  },
  {
    title: '节点名称',
    dataIndex: 'nodeType',
    align: 'center',
    render: (text) => {
      if (text === 'CATALOG') {
        return '目录节点'
      } else {
        return '数据节点'
      }
    }
  },
  {
    title: '节点描述',
    dataIndex: 'nodeRemark',
    align: 'center',
  },
]



const DataItems = ({ fullData }) => {
  const [expandedRowKeys, setExpandedRowKeys] = useState([]);
  const { colorLink } = useThemeToken();

  const onExpandCurrent = (expanded, record) => {
    //  展开收缩时需要动态修改展开行集合
    if (expanded) {
      setExpandedRowKeys([...expandedRowKeys, record.id])
    } else {
      setExpandedRowKeys(expandedRowKeys.filter(function (item) {
        return item !== record.id
      }))
    }
    // if (expanded && (!record.children || !record.children.length)) {
    //   onLoadData(record)
    // }
  }

  return (<Table
    bordered
    columns={columns}
    rowKey={(record) => record.id}
    dataSource={fullData.nodeList || []}
    pagination={false}
    childrenColumnName={'childrenList'}
    expandable={{
      expandedRowKeys: expandedRowKeys,
      onExpand: onExpandCurrent,
      expandIcon: ({ expanded, onExpand, record }) => {
        if (record.nodeType === 'DATA' || (record.parentId === '-1' && ['id', 'name'].includes(record.nodeName))) {
          return <span style={{ 'marginRight': '22px' }}></span>
        } else if (expanded) {
          return <button style={{ color: colorLink, marginRight: '8px' }} onClick={e => onExpand(record, e)}><CaretDownOutlined /></button>
        } else {
          return <button style={{ color: colorLink, marginRight: '8px' }} onClick={e => onExpand(record, e)}><CaretRightOutlined /></button>
        }
      },
    }}
  />)
}

export default DataItems;